<template>
    <div class="cityWrap">
        <el-select @change="provinceChange" v-model="provincesvalue" placeholder="省">
            <el-option v-for="item in provincees" :value="item.id" :key="item.id" :label="item.name"></el-option>
        </el-select>
        <el-select @change="cityChange" v-model="citysvalue" placeholder="市">
            <el-option v-for="item in citys" :value="item.id" :key="item.id" :label="item.name"></el-option>
        </el-select>

        <el-select @change="areaChange" v-model="areasvalue" placeholder="区县">
            <el-option v-for="item in areas" :value="item.id" :key="item.id" :label="item.name"></el-option>
        </el-select>
    </div>
</template>

<script>
    import {list} from "../api/area"
    import {update} from "../api/area"
    import {remove} from "../api/area"
    import {save} from "../api/area"

    export default {
        data() {
            return {
                areaId:"320105",
                provincesvalue: "江苏省", //筛选的数据
                citysvalue: "南京市",
                areasvalue: "建邺区",
                provinces: [],
                provincees: [],  //省
                citys: [], //市
                areas: [], //区
            };
        },

        //初始化加载所有的省
        created() {
            var requestData = {limit: "100", parentId: 1};
            list(requestData).then(res => {
                this.provincees = res.page.list;

                var requestData = {limit: "100", parentId: 320000};
                list(requestData).then(res => {
                    return this.citys = res.page.list;
                })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        })
                    });
                var requestData = {limit: "100", parentId: 320100};
                list(requestData).then(res => {
                    return this.areas = res.page.list;
                })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        })
                    })
            })
                .catch(err => {
                    this.$message({
                        message: "请求失败",
                        type: "warning",
                        center: true
                    })
                })
        },

        methods: {
            provinceChange(query) {
                this.citysvalue = "";
                this.areasvalue = "";
                var requestData = {limit: "100", parentId: query};
                list(requestData).then(res => {
                    return this.citys = res.page.list;
                })
                .catch(err => {
                    this.$message({
                        message: "请求失败",
                        type: "warning",
                        center: true
                    })
                });


            },
            cityChange(query) {
                this.areasvalue = "";
                var requestData = {limit: "100", parentId: query};
                list(requestData).then(res => {
                    return this.areas = res.page.list;
                })
                    .catch(err => {
                        this.$message({
                            message: "请求失败",
                            type: "warning",
                            center: true
                        })
                    })

            },
            areaChange(query) {
                this.areas.forEach(v=>{
                    if(v.id==query){
                        v['detailPosition']=this.provincesvalue+this.citysvalue
                        this.$emit("receiveArea",v)
                        return;
                    }
                });
            }
        }
    };
</script>

<style lang='less' scoped>
</style>
